<template>
	<view class="page-fabulous padding-top-sm">
		<view class="cu-list menu sm-border custom-list">
			<block v-for="(item,index) of list" :key="index">
				<view class="cu-item">
					<view class="flex align-start justify-start margin-right custom-left">
						<!-- <view class="cu-avatar round custom-avatar margin-right-xs flex-shrink" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view> -->
						<view class="text-sm">
							<!-- <view class="textcut">七言说</view> -->
							<view class="hidden2 margin-bottom-xs">{{item.content}}</view>
							<view class="text-xs text-666">{{item.create_time_man}}</view>
						</view>
					</view>
					<view class="action custom-right" @click="showDetail(item.video_id)">
						<view class="img-box-play">
							<image src="/static/images/play-01.png" mode="widthFix"></image>
						</view>
						<view class="fabilous-content text-xs">
							<image :src="item.video_img" mode="aspectFit"/>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import profileMixin from "@/mixins/profile"

	export default {
		mixins: [profileMixin],
		data(){
			return {
				query: {
					page: 1,
					size: 10
				}
			}
		},
		methods:{
			showDetail(id) {
				this.$h.router.push({
					path: "/pages/video/videoDetail",
					params: {
						id
					}
				})
			},
			getList(){
				this.m_getList(this.$h.api.userModel.getMyComments, this.query)
			}
		},
		onLoad() {
			this.getList()
		}
	}
</script>
<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	.page-fabulous {
		.cu-list.menu.sm-border.custom-list {
			.cu-item {
				height: 200rpx;
				padding: 0 20rpx;

				&::after {
					border-bottom: 2rpx solid $bgColor;
					left: 20rpx;
					width: calc(200% - 40px);
				}

				.cu-avatar.custom-avatar {
					width: 50rpx;
					height: 50rpx;
				}

				.custom-left {
					height: 80rpx;
				}

				.action.custom-right {
					position: relative;

					.fabilous-content {
						width: 180rpx;
						height: 140rpx;
						background-color: $bgColor;
						border-radius: 12rpx;
						// padding: 24rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}

					.img-box-play {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						left: 0;
						right: 0;
						top: 0;
						bottom: 0;
						margin: auto;
						z-index:1000
					}
					
					
				}
			}
		}
	}
</style>
